<template>
  <div class="app-container">
    <el-card class="box-card">
      <div class="charts-container">
        <div class="chart-item">
          <div id="pieChart" style="width: 100%; height: 400px;"></div>
        </div>
        <div class="chart-item">
          <div class="search-box">
            <el-select v-model="queryParams.deptName" placeholder="请选择部门" @change="handleQuery">
              <el-option label="杭州分公司" value="杭州分公司" />
              <el-option label="研发部门" value="研发部门" />
              <el-option label="市场部门" value="市场部门" />
              <el-option label="测试部门" value="测试部门" />
              <el-option label="财务部门" value="财务部门" />
              <el-option label="运维部门" value="运维部门" />
              <el-option label="上海分公司" value="上海分公司" />
            </el-select>
          </div>
          <div id="barChart" style="width: 100%; height: 400px;"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { Statistics, deptStatistics } from '@/api/salaryBase/salaryBase'

export default {
  name: 'SalaryStatistics',
  data() {
    return {
      queryParams: {
        deptName: ''
      },
      pieChart: null,
      barChart: null
    }
  },
  mounted() {
    this.initCharts()
    this.getStatistics()
  },
  methods: {
    initCharts() {
      this.pieChart = echarts.init(document.getElementById('pieChart'))
      this.barChart = echarts.init(document.getElementById('barChart'))
      
      // 初始化饼图配置
      const pieOption = {
        title: {
          text: '部门薪资分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '部门薪资',
            type: 'pie',
            radius: '50%',
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      // 初始化柱状图配置
      const barOption = {
        title: {
          text: '特定部门薪资统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value',
          name: '薪资'
        },
        series: [
          {
            data: [],
            type: 'bar'
          }
        ]
      }

      this.pieChart.setOption(pieOption)
      this.barChart.setOption(barOption)
    },
    async getStatistics() {
      try {
        // 获取饼图数据（全部部门统计）
        const pieRes = await Statistics()
        if (pieRes.code === 200) {
          this.pieChart.setOption({
            series: [{
              data: pieRes.data
            }]
          })
        }

        // 获取柱状图数据（特定部门统计）
        const barRes = await deptStatistics(this.queryParams)
        if (barRes.code === 200) {
          this.barChart.setOption({
            xAxis: {
              data: barRes.data.categories
            },
            series: [{
              data: barRes.data.values
            }]
          })
        }
      } catch (error) {
        console.error('获取统计数据失败:', error)
      }
    },
    handleQuery() {
      this.getStatistics()
    }
  },
  beforeDestroy() {
    if (this.pieChart) {
      this.pieChart.dispose()
    }
    if (this.barChart) {
      this.barChart.dispose()
    }
  }
}
</script>

<style scoped>
.charts-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.chart-item {
  width: 50%;
  padding: 0 10px;
}
.search-box {
  margin-bottom: 20px;
}
</style> 